import React, { PureComponent } from 'react';
import { Card, Flex, Icon, List, NavBar } from 'antd-mobile';
import { history } from '@@/core/history';
import { Direction, Entity } from '@/services/searchParam';
import './index.less';
import moment from 'moment';

const Item = List.Item;
const Brief = Item.Brief;

export default class PublishInfo extends PureComponent {
  render(): any {
    // @ts-ignore
    const info = this.props.history.location.query;
    const { start, end } = localStorage;
    console.log(info)
    return <div>
      <NavBar
        mode="dark"
        icon={<Icon type="left" />}
        onLeftClick={() => history.goBack()}
      >发布详情</NavBar>
      <Card full={true}>
      <Flex className={'top'}>
        <Flex.Item
          justify={'center'}
          align={'right'}
        >
          <span className={'location-font'}> { info.direction === Direction.STARTOEND ?  start : end}</span>
        </Flex.Item>
        <Flex.Item
          justify={'center'}
          align={'center'}
        >
          <span className={'location-font'}>→</span>
        </Flex.Item>
        <Flex.Item
          justify={'center'}
          align={'left'}
        >
          <span className={'location-font'}>{ info.direction === Direction.STARTOEND ?  end : start}</span>
        </Flex.Item>
      </Flex>

      <Flex>
        <Flex.Item
          justify={'center'}
          align={'right'}
        >
          <span>{info.startRemarks}</span>
        </Flex.Item>
        <Flex.Item
          justify={'center'}
          align={'center'}
          alignContent={'center'}
        >
        </Flex.Item>
        <Flex.Item
          justify={'center'}
          align={'left'}
        >
          <span>{info.endRemarks}</span>
        </Flex.Item>
      </Flex>
      </Card>

      <List renderHeader={() => '基本信息'}>
        <Item arrow="empty" extra={info.entity === Entity.PEOPLE ? '人找车' : '车找人'} multipleLine>拼车方式</Item>
      </List>
      <List>
        <Item arrow="empty" multipleLine extra={moment(info.departureTime).format('MM-DD HH:mm:ss')}>出发时间</Item>
      </List>
      <List>
        <Item arrow="empty" multipleLine extra={info.seatNumber}>车辆座位</Item>
      </List>
      <List>
        <Item arrow="horizontal" multipleLine extra={info.phone} onClick={() => {
          location.href = 'tel:' + info.phone
        }}>手机号码</Item>
      </List>
      <List renderHeader={() => '其他说明'}>
        <Item wrap>{info.remarks}</Item>
      </List>
    </div>;
  }
}
